<section id="content">
    <section class="vbox">
        <section class="scrollable padder">
            <div class="m-b-md">
                <h3 class="m-b-none" style="display: flex;justify-content: space-between;">
                    <a href="{:url('Qa/index',array('page'=>$qaIndexPageInfo.page,'search_value'=>$qaIndexPageInfo.search_value))}"
                        class="btn btn-s-md btn-default">返&nbsp;&nbsp;回</a>
                </h3>
            </div>
            <section class="panel panel-default">
                <div class="table-responsive">
                    <table class="table table-striped m-b-none" data-ride="datatables"
                        style="text-align:center!important;">
                        <thead>
                            <tr>
                                <th colspan="9">
                                    <div class="row" style="padding: 1rem 0;">
                                        <form class="col-sm-8"
                                            action="{:url('QaBank/list',array('qa_main_id'=>$qa_main_id))}"
                                            method="post" enctype="multipart/form-data"
                                            style="margin-top: 5px;margin-bottom: 0;">

                                            <input type="text" class="form-control"
                                                style="width:30rem;display: inline;height:34px;" data-required="true"
                                                name="search[search_value]" value="{$search.search_value}"
                                                placeholder="关键词">
                                            <button type="submit" class="btn btn-success btn-s-xs">搜索</button>
                                        </form>
                                        <!-- <div class="col-sm-4">
                                            <div class="btn-line">
                                                <button class="btn btn-primary" type="button"
                                                    onclick="addBank();">添加题目</button>
                                                <a href="{:url('QaBank/exportExcel',['qa_main_id'=>$qa_main_id])}"
                                                    class="btn btn-primary" target="_blank">导出题目</a>
                                                <button class="btn btn-danger" type="button"
                                                    onclick="importExcel();">导入题目</button>
                                            </div>
                                        </div> -->
                                    </div>
                                </th>
                            </tr>
                        </thead>
                        <tbody style="font-size:1em;" class="qa-bank-list">
                            {volist name="qaBankList" id="qaBank" key="k"}
                            <tr>
                                <td>
                                    <form class="qa_list" id="qa_form_{$k}">
                                        <div class="qa_title">
                                            <input type="text" name="id" value="{$qaBank.id}" style="display: none">
                                            <input type="text" name="qa_main_id" value="{$qa_main_id}"
                                                style="display: none">
                                            <div class="q_no">{$qaBank.q_no}.</div>
                                            <select class="form-control" name="type_tag" id="type_tag_{$k}"
                                                onchange="typeTagChange({$k})">
                                                <option value="判断" {$qaBank.type_tag?($qaBank.type_tag=='判断'
                                                    ?'selected':''):''}>判断</option>
                                                <option value="单选" {$qaBank.type_tag?($qaBank.type_tag=='单选'
                                                    ?'selected':''):''}>单选</option>
                                                <option value="多选" {$qaBank.type_tag?($qaBank.type_tag=='多选'
                                                    ?'selected':''):''}>多选</option>
                                                <option value="填空" {$qaBank.type_tag?($qaBank.type_tag=='填空'
                                                    ?'selected':''):''}>填空</option>
                                            </select>
                                            <div class="title_and_analysis">
                                                <input type="text" class="form-control" id="title" name="title"
                                                    placeholder="请输入问题" onchange="qaChange({$k})"
                                                    value="{$qaBank.title?$qaBank.title:''}">

                                                <input type="text" class="form-control" id="analysis" name="analysis"
                                                    placeholder="请输入问题的解析" onchange="qaChange({$k})"
                                                    value="{$qaBank.analysis?$qaBank.analysis:''}">
                                            </div>
                                            <button class="btn btn-primary" type="button"
                                                onclick="uploadImage({$k});">上传图片</button>
                                        </div>

                                        <div class="above_count" id="above_count_{$k}"
                                            style="display:{$qaBank.type_tag?($qaBank.type_tag=='多选-数量记分'?'flex':'none'):'none'};">
                                            <div>选择个数大于</div>
                                            <div><input name="count_mode_above" class="form-control" placeholder="选择的个数"
                                                    type="text" onchange="qaChange({$k})"
                                                    value="{$qaBank.count_mode.above?$qaBank.count_mode.above:'0'}" />
                                            </div>
                                            <div>得</div>
                                            <div><input name="count_mode_score" class="form-control" placeholder="分值"
                                                    type="text" onchange="qaChange({$k})"
                                                    value="{$qaBank.count_mode.score?$qaBank.count_mode.score:'0'}" />
                                            </div>
                                            <div>分</div>
                                        </div>
                                        <div class="upload_image" id="upload_image_{$k}"
                                            style="display:{$qaBank.image_url?'block':'none';};">
                                            <div id="upload-img">
                                                <img src="{$qaBank.image_url?$qaBank.image_url:'__PIC__'}"
                                                    id="update_img">
                                                <input type="hidden" id="image_url" name="image_url"
                                                    value="{$qaBank.image_url?$qaBank.image_url:''}">
                                                <input type="file" class="uploadifive" id="uploadifive_{$k}"
                                                    data-index="{$k}">
                                            </div>
                                        </div>
                                        <div class="qa_json">
                                            <?php if (!empty($qaBank['qa_json'])) : foreach ($qaBank['qa_json'] as $key => $v) : ?>
                                            <section class="section" id="bank_index_{$key}">
                                                <div class="qa_bank">
                                                    <div>
                                                        <button class="btn btn-danger" type="button"
                                                            onclick="delItem(this,{$k});">-</button>
                                                    </div>
                                                    <div>
                                                        分值：
                                                    </div>
                                                    <div class="score">
                                                        <input name="qa_json[{$key}][score]" class="form-control"
                                                            onchange="qaChange({$k})" placeholder="分值" type="text"
                                                            value="{$v.score? $v.score : '0'}" />
                                                    </div>
                                                    <div>
                                                        答案：
                                                    </div>
                                                    <div class="text">
                                                        <input name="qa_json[{$key}][text]" class="form-control"
                                                            onchange="qaChange({$k})" placeholder="答案" type="text"
                                                            value="{$v.text}" />
                                                    </div>
                                                </div>
                                            </section>
                                            <?php endforeach;
                                            else : ?>
                                            <section class="section" id="bank_index_0">
                                                <div class="qa_bank">
                                                    <div>
                                                        <button class="btn btn-danger" type="button"
                                                            onclick="delItem(this,{$k});">-</button>
                                                    </div>
                                                    <div>
                                                        分值：
                                                    </div>
                                                    <div class="score">
                                                        <input name="qa_json[0][score]" class="form-control"
                                                            onchange="qaChange({$k})" placeholder="分值" type="text"
                                                            value="{$v.score? $v.score : '0'}" />
                                                    </div>
                                                    <div>
                                                        答案：
                                                    </div>
                                                    <div class="text">
                                                        <input name="qa_json[0][text]" class="form-control"
                                                            onchange="qaChange({$k})" placeholder="答案" type="text"
                                                            value="" />
                                                    </div>
                                                </div>
                                            </section>
                                            <?php endif ?>
                                        </div>
                                        <section class="section">
                                            <div class="qa_bank">
                                                <div style="width: 100%;text-align: left;">
                                                    <button class="btn btn-primary" type="button"
                                                        onclick="addItem({$k});">+</button>
                                                </div>
                                            </div>
                                        </section>
                                    </form>
                                </td>
                            </tr>
                            {/volist}
                        </tbody>
                    </table>
                </div>
                <table border="0" style="width: 100%; height: 20px">
                    <tbody>
                        <tr>
                            <td style="width: 2px; height: 31px"></td>
                            <td style="width: 500px; height: 31px">
                                <span id="pager" style="font-family:宋体;font-size:12px;">
                                    <table border="0" style="font-family:宋体;font-size:12px;">
                                        <tbody>
                                            <tr>
                                                <td align="right">
                                                    <span>
                                                        共<font color="Red">{$count}</font>条记录&nbsp;&nbsp;当前<font
                                                            color="Red">{$page}</font>/<font color="Red">{$allpage}
                                                        </font>页
                                                    </span> &nbsp;[
                                                    <a id="pager_First"
                                                        href="{:url('QaBank/list',array('qa_main_id'=>$qa_main_id,'page'=>1,'search_value'=>$search['search_value']))}"
                                                        title="首页">首页</a>] &nbsp;[
                                                    <a id="pager_Prev"
                                                        href="{:url('QaBank/list',array('qa_main_id'=>$qa_main_id,'page'=>$page-1,'search_value'=>$search['search_value']))}"
                                                        title="前页">前页</a>] &nbsp;[
                                                    <a id="pager_Next" title="后页"
                                                        href="{:url('QaBank/list',array('qa_main_id'=>$qa_main_id,'page'=>$page+1,'search_value'=>$search['search_value']))}">后页</a>]
                                                    &nbsp;[
                                                    <a id="pager_Last" title="尾页"
                                                        href="{:url('QaBank/list',array('qa_main_id'=>$qa_main_id,'page'=>$allpage,'search_value'=>$search['search_value']))}">尾页</a>]
                                                    &nbsp;转到
                                                    <form
                                                        action="{:url('QaBank/list',array('qa_main_id'=>$qa_main_id,'search_value'=>$search['search_value']))}"
                                                        method="post" style="display: inline">
                                                        <input name="page" type="text" value="{$page}"
                                                            id="pager_txbPage" style="width:30px;">
                                                        <input type="submit" name="pager$btnGo" value="转到"
                                                            id="pager_btnGo">
                                                    </form>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </span>
                            </td>
                            <td style="width: 100px; height: 31px"></td>
                        </tr>
                    </tbody>
                </table>
            </section>
        </section>
    </section>
    <a href="#" class="hide nav-off-screen-block" data-toggle="class:nav-off-screen, open" data-target="#nav,html"></a>
    <!-- 导入EXCEL -->
    <div class="import-excel" style="display:none;">
        <div class="pop_window">
            <div class="status-bar">
                <div class="title">通过EXCEL文件导入题目</div>
                <a class="close_pop_window" href="javascript:closeImportExcel();">
                    <img src="/azfzjkp_dev/public/home/image/close.png ">
                </a>
            </div>
            <div id="upload-excel">
                <div style="margin: auto;width: auto;max-width: 200px;">
                    <input type="hidden" id="excel_url" name="excel_url" value="">
                    <input type="file" class="uploadifive" id="uploadifive_excel">
                </div>
                <div class="upload-msg"></div>
                <div class="import-type" style="display:none;">
                    <div class="type">
                        <a class="title btn btn-success" href="javascript:toImportExcel('append');">追加导入
                            <div class="msg">·原有题目会保留</div>
                        </a>
                    </div>
                    <div class="type">
                        <a class="title btn btn-primary" href="javascript:toImportExcel('update');">更新导入
                            <div class="msg">·问题相同的题目会被替换</div>
                        </a>
                    </div>
                    <div class="type">
                        <a class="title btn btn-danger" href="javascript:toImportExcel('replace');">全新导入
                            <div class="msg">·原有题目会删除</div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<script type="text/javascript">
    var excel_url = '';
    $(function () {
        $('.uploadifive').each(function (i, obj) {
            uploadifiveInit($(this).data('index'));
        });

        $('#uploadifive_excel').uploadifive({
            'auto': true,
            'fileType': 'xls/*',
            'multi': true,
            'uploadLimit': 100,
            'queueSizeLimit': 100,
            'buttonText': '选择EXCEL文件(20M以内)',
            'fileSizeLimit': '20MB',
            'uploadScript': "{:url('home/Upload/upload')}?fileType=other",
            'onAddQueueItem': function (file) {
                this.data('uploadifive').settings.formData = {
                    'type': 1
                };
            },
            'onUploadComplete': function (file, response) {
                console.log('onUploadComplete');

                var data = JSON.parse(response);
                if (data.response_code == 0) {
                    excel_url = data.data.url;
                    $(".import-excel .pop_window .upload-msg").html(data.data.url + "<br>excel文件上传成功，请选择导入类型");
                    $(".import-excel .pop_window .import-type").show();
                } else {
                    alert(data.msg);
                }
            },
            'onError': function (errorType) {
                alert('The error was: ' + errorType);
            }
        });
    });

    // 执行导入
    function toImportExcel(import_type) {
        location.href = "{:url('QaBank/importExcel',array('qa_main_id'=>$qa_main_id))}?import_type=" + import_type + "&excel_url=" + excel_url;
    }

    // 导入EXCEL
    function importExcel() {
        $(".import-excel").show();
    }

    function closeImportExcel() {
        $(".import-excel").hide();
    }

    function uploadImage(index) {
        $("#upload_image_" + index).show();
        $("#uploadifive-uploadifive_" + index + " input:last").click();
    }

    function uploadifiveInit(index) {
        console.log('uploadifiveInit:' + index);
        $('#uploadifive_' + index).uploadifive({
            'auto': true,
            'fileType': 'image/*',
            'multi': false,
            'uploadLimit': 0,
            'queueSizeLimit': 0,
            'buttonText': '选择图片(4M以内)',
            'fileSizeLimit': '4MB',
            'uploadScript': "{:url('home/Upload/upload')}",
            'onAddQueueItem': function (file) {
                this.data('uploadifive').settings.formData = {
                    'type': 1
                };
            },
            'onUploadComplete': function (file, response) {
                console.log('onUploadComplete');
                let i = $(this).data('index');
                console.log(i);

                var data = JSON.parse(response);
                if (data.response_code == 0) {
                    $("#qa_form_" + i + ' #image_url').val(data.data.url);
                    $("#qa_form_" + i + ' #update_img').attr('src', data.data.url);
                    // 更新问题
                    qaChange(i);
                } else {
                    alert(data.msg);
                }
            },
            'onError': function (errorType) {
                alert('The error was: ' + errorType);
            }
        });
    }

    function addBank() {
        let i = 0;
        while ($("#qa_form_" + i).length > 0) {
            i++;
        }

        let classify = $("#classify:first").html();
        let type_tag = $('[name="type_tag"]:first').html();

        let a = '<tr>' +
            '<td>' +
            '<form class="qa_list" id="qa_form_' + i + '">' +
            '<div class="qa_title">' +
            '<input type="text" name="id" value="" style="display: none">' +
            '<input type="text" name="qa_main_id" value="{$qa_main_id}" style="display: none">';
        if (typeof classify !== 'undefined') {
            a = a + '<select class="form-control" name="classify" id="classify" onchange="qaChange(' + i + ')">' + classify + '</select>';
        }
        a = a + '<select class="form-control" name="type_tag" id="type_tag_' + i + '" onchange="typeTagChange(' + i + ')">' + type_tag + '</select>' +
            '<input type="text" class="form-control" id="title" name="title" placeholder="请输入问题" onchange="qaChange(' + i + ')" value="">' +
            '<button class="btn btn-primary" type="button" onclick="uploadImage(' + i + ');">上传图片</button>' +
            '</div>' +
            '<div class="above_count" id="above_count_' + i + '">' +
            '<div>选择个数大于</div>' +
            '<div><input name="count_mode_above" class="form-control" placeholder="选择的个数" type="text" onchange="qaChange(' + i + ')" value="">' +
            '</div>' +
            '<div>得</div>' +
            '<div><input name="count_mode_score" class="form-control" placeholder="分值" type="text" onchange="qaChange(' + i + ')" value="">' +
            '</div>' +
            '<div>分</div>' +
            '</div>' +
            '<div class="upload_image" id="upload_image_' + i + '" style="display:none;">' +
            '<div id="upload-img">' +
            '<img src="__PIC__" id="update_img">' +
            '<input type="hidden" id="image_url" name="image_url" value="">' +
            '<input type="file" class="uploadifive" id="uploadifive_' + i + '" data-index="' + i + '">' +
            '</div>' +
            '</div>' +
            '<div class="qa_json">' +
            '<section class="section" id="bank_index_0">' +
            '<div class="qa_bank">' +
            '<div>' +
            '<button class="btn btn-danger" type="button" onclick="delItem(this,' + i + ')">-</button>' +
            '</div>' +
            '<div>分值：</div>' +
            '<div class="score">' +
            '<input name="qa_json[0][score]" class="form-control" onchange="qaChange(' + i + ')" placeholder="分值" type="text" value="" />' +
            '</div>' +
            '<div>答案：</div>' +
            '<div class="text">' +
            '<input name="qa_json[0][text]" class="form-control" onchange="qaChange(' + i + ')" placeholder="答案" type="text" value="" />' +
            '</div>' +
            '</div>' +
            '</section>' +
            '</div>' +
            '<section class="section">' +
            '<div class="qa_bank">' +
            '<div style="width: 100%;text-align: left;">' +
            '<button class="btn btn-primary" type="button" onclick="addItem(' + i + ');">+</button>' +
            '</div>' +
            '</div>' +
            '</section>' +
            '</form>' +
            '</td>' +
            '</tr>';

        $(".qa-bank-list").prepend(a);

        // 上传按钮初始化
        setTimeout(function () {
            uploadifiveInit(i);
            $("#type_tag_" + i).val('单选');
        }, 100);
    }

    function addItem(index) {
        var i = 0;
        while ($("#qa_form_" + index + " #bank_index_" + i).length > 0) {
            i++;
        }

        var a = '<section class="section" id="bank_index_' + i + '">' +
            '<div class="qa_bank">' +
            '<div>' +
            '<button class="btn btn-danger" type="button" onclick="delItem(this,' + index + ');">-</button>' +
            '</div>' +
            '<div>分值：</div>' +
            '<div class="score">' +
            '<input name="qa_json[' + i + '][score]" class="form-control" placeholder="分值" type="text" onchange="qaChange(' + index + ')" value="">' +
            '</div>' +
            '<div>答案：</div>' +
            '<div class="text">' +
            '<input name="qa_json[' + i + '][text]" class="form-control" placeholder="答案" type="text" onchange="qaChange(' + index + ')" value="">' +
            '</div>' +
            '</div>' +
            '</section>';

        $("#qa_form_" + index + " .qa_json").append(a);
    }

    // 删除选项
    function delItem(obj, index) {
        if ($(obj).parents('.qa_json').find('.qa_bank').length < 2) {
            var msg = "删除全部选项，就会删除整个题哦！\n\n您确定要删除整个题吗？";
            if (confirm(msg) == true) {
                // 删除整个题
                var id = $(obj).parents('.qa_list').find('[name="id"]').val();
                var qa_main_id = $(obj).parents('.qa_list').find('[name="qa_main_id"]').val();

                if (id > 0) {
                    $.ajax({
                        type: "POST",
                        url: "{:url('QaBank/deleteForAjax')}",
                        data: { id: id, qa_main_id: qa_main_id },
                        success: function (result) {
                            console.log(result);
                            $(obj).parents('tr').remove();
                        },
                        error: function (data) {
                            console.log("error:");
                            console.log(data);
                        }
                    });
                } else {
                    $(obj).parents('tr').remove();
                }
            }
            return false;
        } else {
            $(obj).parent().parent().parent().remove();
            qaChange(index);
        }
    }

    // 题型修改后
    function typeTagChange(index) {
        var type_tag = $("#type_tag_" + index).val();
        if (type_tag == '多选-数量记分') {
            $("#above_count_" + index).css("display", 'flex');
        } else {
            $("#above_count_" + index).hide();
        }
        qaChange(index);
    }

    // 问题修改后提交
    function qaChange(index) {
        // console.log(index);
        $.ajax({
            type: "POST",
            url: "{:url('QaBank/editForAjax')}",
            data: $("#qa_form_" + index).serialize(),
            success: function (result) {
                console.log(result);
                if (result.code == '0') {
                    var id = $("#qa_form_" + index).find('[name="id"]').val();
                    if (id < 1 && result.data.id > 0) {
                        $("#qa_form_" + index).find('[name="id"]').val(result.data.id);
                    }
                }
            },
            error: function (data) {
                console.log("error:");
                console.log(data);
            }
        });
    }
</script>

<style type="text/css">
    .classify_select {
        border: 1px solid #d9d9d9;
        border-radius: 2px;
        height: 34px;
        font-size: 14px;
        color: #555;
        width: auto;
        display: inline-block;
    }

    .qa_list .add_item {
        margin: 20px;
    }

    .qa_list button {
        margin-right: 20px;
    }

    .qa_list .qa_title {
        display: flex;
    }

    .qa_list .qa_title button {
        margin-right: 0px;
        margin-left: 20px;
    }

    .qa_list .above_count {
        display: none;
        margin: 10px;
        line-height: 34px;
        margin-left: 65px;
    }

    .qa_list .above_count input {
        width: 40px;
        text-align: center;
        margin: auto 10px;
    }

    .qa_list .upload_image {
        display: none;
        margin: 10px;
    }

    .qa_list .qa_title select {
        padding: 5px 10px;
        border: 1px solid #d9d9d9;
        border-radius: 3px;
        margin-right: 20px;
        width: unset;
    }

    .qa_list .qa_bank {
        line-height: 34px;
        display: flex;
        margin-top: 20px;
    }

    .qa_list .qa_bank button {
        width: 35px;
    }

    .qa_list .qa_bank div {
        margin: auto;
    }

    .qa_list .qa_bank .qa_result_id {
        display: none;
    }

    .qa_list .qa_bank .score {
        width: 70px;
        margin-right: 20px;
    }

    .qa_list .qa_bank .score input {
        text-align: right;
    }

    .qa_list .qa_bank .text {
        flex: 1;
    }

    .qa_list .qa_bank .text textarea {
        height: 70px;
    }

    .qa_list .uploadifive-button {
        display: none;
    }

    input[type='text']::-webkit-input-placeholder {
        /* 使用webkit内核的浏览器*/
        color: #999999;
    }

    .btn-line {
        display: flex;
        justify-content: center;
    }

    .btn-line a {
        margin-right: 20px;
        margin-left: 20px;
    }

    .import-excel {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        display: flex;
        align-items: center;
        justify-content: space-around;
    }

    .import-excel .pop_window {
        width: 50%;
        height: 55%;
        background: #ffffff;
        padding: 10px;
        display: flex;
        flex-direction: column;
        border-radius: 2px;
    }

    .import-excel .pop_window .status-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 10px;
    }

    .import-excel .pop_window .status-bar .close_pop_window img {
        width: 14px;
        height: 14px;
        margin: 10px;
        display: block;
    }

    .import-excel .pop_window .import-type {
        display: flex;
        margin-top: 30px;
        align-items: center;
        justify-content: space-between;
    }

    .import-excel .pop_window .import-type .type {
        flex: 1;
        /* margin: 30px; */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
    }

    .import-excel .pop_window .import-type .type .title {
        font-size: 25px;
        font-weight: bold;
        margin-bottom: 10px;
        padding: 30px 50px;
    }

    .import-excel .pop_window .import-type .type .msg {
        font-size: 12px;
        margin-top: 8px;
        font-weight: normal;
    }

    .import-excel .pop_window .upload-msg {
        font-size: 14px;
        text-align: center;
    }

    .q_no {
        font-weight: bold;
        line-height: 34px;
        margin-right: 10px;
    }

    .title_and_analysis {
        flex: 1;
    }

    .title_and_analysis input {
        display: block;
        margin-top: 4px;
    }
</style>
<!-- datatables -->